// @ts-ignore
import {React, useState, useEffect, useCallback} from 'react';
// @ts-ignore
import {Button, Space, Table, Tag} from 'antd';
// @ts-ignore
import type { TableProps } from 'antd';
// @ts-ignore
import {PageContainer} from "@ant-design/pro-components";
import {getBorrowHistoryById, getCurrentUserById} from "@/services/ant-design-pro/api";
import { history } from '@umijs/max'
import "./History.less"

interface DataType {
  "book_id": number,
  "borrow_time": string,
  "return_time": string,
  "user_id": number,
  "book_name": string,
  "num": number,
  "remain_num": number,
}

const History: React.FC = () => {
  const [ borrowHistoryList, setBorrowHistoryList ] = useState<API.BorrowListResult>({})
  const [currentUser,setCurrentUser] = useState<API.CurrentUser>({})

  const getCurrentUser = async (userId: string) => {
    try {
      const res = await getCurrentUserById(userId);
      if (res.data) {
        setCurrentUser(res);
      }
    } catch (error) {
      console.log(error);
    }
  }
  useEffect(() => {
    if(localStorage.getItem("userId")){
      // @ts-ignore
      getCurrentUser(localStorage.getItem("userId")).then()
    }
  },[])

  const getBorrowHistoryList =  async () => {
    if(currentUser.data){
      try {
        const res = await getBorrowHistoryById(currentUser.data.id)
        console.log(res)
        if(res.data){
          setBorrowHistoryList(res);
        }
      }catch (error){
        console.log(error)
      }
    }
  }
  useEffect(() => {
    getBorrowHistoryList().then();
  }, [currentUser]);

  const borrowHistory = borrowHistoryList.data

  const clickForDetail = useCallback((id: number) => {
    history.push(`/book/detail/${id}`);
  }, [])

  const clickForReturn = useCallback((id: number) => {
    history.push(`/book/detail/${id}`);
  }, [])

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '书籍号',
      dataIndex: 'book_id',
      key: 'book_id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '书籍名称',
      dataIndex: 'book_name',
      key: 'book_name',
    },
    {
      title: '借阅数量',
      dataIndex: 'num',
      key: 'num',
    },
    {
      title: '借阅时间',
      dataIndex: 'borrow_time',
      key: 'borrow_time',
    },
    {
      title: '归还时间',
      dataIndex: 'return_time',
      key: 'return_time',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <div
          style={{
            width: "200px"
          }}
        >

          <Space size="middle">
            <Button type={"primary"} onClick={() => clickForDetail(record.book_id)}  ghost>查看详情</Button>
          </Space>
          {!record.return_time && (
            <Space size="middle">
              <Button  type={"primary"} onClick={() => clickForReturn(record.book_id)}>还书</Button>
            </Space>
          )}
        </div>
      ),
    },
  ];

  return (
    <PageContainer>
      {borrowHistory && (
        <Table columns={columns} dataSource={borrowHistory}/>
      )}

    </PageContainer>
  )
}

export default History;
